<template>
    <div class="t3">
        <van-nav-bar left-text="返回" @click-left="onClickLeft" left-arrow>
        <template #title>
            <div class="title"></div>
        </template>
        </van-nav-bar>
        <div ref="cont">
        <div class="box" ref="box" @scroll="binScroll">
            <van-swipe @change="onChange">
            <van-swipe-item v-for="(item,i) in data.images" :key="i">
                <img class="img" :src="item.u" alt="">
            </van-swipe-item>
            <template #indicator>
                <div class="custom-indicator" v-if="data.images">{{ current + 1 }}/{{data.images.length}}</div>
                <div class="custom-left">{{data.selection_text}}</div>
            </template>
            </van-swipe>
            <div class="contBox">
                <div class="text" v-if="data.contents">
                    <div style="white-space: pre-wrap;" :style="{color:data.contents[0].color}">
                        {{data.contents[0].c}}
                    </div>
                </div>
                <div class="time">
                    <div class="left">
                        {{data.publishtime | time}}
                    </div>
                    <div class="right">
                        <!-- <span>{{}}</span>
                        <span>{{}}</span> -->
                    </div>
                </div>
                <div class="about">
                    <div class="aboutTitle">
                        相关笔记
                    </div>
                    <div class="notebox" ref="notebox">
                        <waterfall :col="2" :data="aboutdata" :gutterWidth="10">
                            <template>
                                <span v-for="(item,i) in aboutdata" :key="i+'c'">
                                    <div class="noteItem" v-if="item.type === 1">
                                        <img :src="item.note.image_u" :lazy-src="item.note.image_u" alt="" @click="bint3(item.note.id)">
                                        <div class="itemCont">
                                            <div class="topTitle">
                                                {{item.note.title}}
                                            </div>
                                            <div class="bottom">
                                                <div class="left">
                                                    <img :src="item.note.author.p" alt="" @click="binuser(item.note.author.id)">
                                                    <div>&nbsp;{{item.note.author.n}}</div>
                                                </div>
                                                <div class="canyv">
                                                    <img :src="tubiao.weidianzan" alt="" :id="i" data-tubiao=false @click="bintubiao" >
                                                    <div>&nbsp;{{item.note.like_count}}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </span>
                            </template>
                        </waterfall>
                        </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'type3',
        data() {
            return {
                data:{},
                aboutdata:[],
                current: 0,
                tubiao:{
                    dianzan: require("../assets/已点赞.png" ),
                    weidianzan: require("../assets/未点赞.png" )
                },
                id:0
            }
        },
        methods: {
            onChange(index) {
                this.current = index;
            },
            bintubiao(e){
                if(e.target.dataset.tubiao==='true'){
                    e.target.src = this.tubiao.weidianzan
                    e.target.dataset.tubiao='false'
                    this.aboutdata[e.target.id].note.like_count -= 1

                }else{
                    e.target.src = this.tubiao.dianzan
                    e.target.dataset.tubiao='true'
                    this.aboutdata[e.target.id].note.like_count += 1
                }
            },
            binScroll(){
                let length = this.aboutdata.length
                clearTimeout(this.timer)
                this.timer = setTimeout(()=>{
                    if (this.$refs.box.scrollHeight-this.$refs.box.scrollTop===this.$refs.cont.scrollHeight) {
                        this.axios.get(`https://apis.netstart.cn/douguo/note/related/${this.data.id}/${length}/20`). then((response) => {
                        this.aboutdata.push(...response.data.result.list)
                        })
                    }
                },300)
            },
            onClickLeft(){
                this.$router.back()
            },
            getdata(){
                this.id = this.$route.query.id
                this.axios.get(`https://apis.netstart.cn/douguo/note/detail/${this.id}`). then((response) => {
                this.data = response.data.result.note
                })
                this.axios.get(`https://apis.netstart.cn/douguo/note/related/${this.id}/0/20`). then((response) => {
                    if (response.data.state=== "success") {
                        this.aboutdata = response.data.result.list
                    }
                })
            },
            bint3(id){
                this.$router.push({name:'type3',query:{id}})
            },
            binuser(id){
                this.$router.push({name:'user',query:{id}})
            }
        },
        created(){
            this.getdata()
        },
        filters: {
            time: function (value) {
                if (value === undefined) {
                    return ''
                }
                let a = value.split(' ')
                return a[0]
            }
        },
        watch:{
            "$route"(val,oldval){
                if(val.name =='type3'){
                    this.$router.go(0);
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    /deep/.van-nav-bar__text {
    color: #6e6e6e;
    }
    /deep/.van-nav-bar .van-icon {
    color: #6e6e6e;
    }
    .img{
        width: 100%;
    }
    .custom-indicator {
        position: absolute;
        right: 5px;
        bottom: 5px;
        padding: 2px 5px;
        font-size: 12px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 5px;
        color: white;
    }
    .custom-left {
        position: absolute;
        left: 5px;
        bottom: 5px;
        padding: 2px 5px;
        font-size: 12px;
        background: rgba(248, 223, 0, 0.972);
        border-radius: 5px;
        color: rgb(0, 0, 0);
    }
    /deep/.van-swipe__track{
        align-items: center;
    }
    .about{
        margin-top: 10px;
        .aboutTitle{
            font-size: 16px;
            font-weight: 700;
        }
    }
    
    .box{
        height: calc(100vh - 46px);
        overflow: auto;
    }
    .contBox{
        padding: 10px 20px;
        box-sizing: border-box;
        .text{
            line-height: 20px;
        }
        .time{
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            color: rgb(148, 148, 148);
        }
        .notebox{
            width: 100%;
            padding-top: 10px;
            display: flex;
            justify-content: space-between;
            /deep/.vue-waterfall-column{
                padding: 0 5px;
                box-sizing: border-box;
            }
            .noteboxleft{
                width: 49%;
                
            }
            .noteboxright{
                width: 49%;
            }
            .noteItem{
                background-color: whitesmoke;
                margin-bottom: 10px;
                border-radius: 10px;
                overflow: hidden;
                break-inside: avoid;
                >img{
                    width: 100%;
                    border-radius: 10px;
                }
                .itemCont{
                    .topTitle{
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        margin-top: 5px;
                    }
                    .bottom{
                        margin-top: 10px;
                        display: flex;
                        height: 20px;
                        justify-content: space-between;
                        .left{
                            display: flex;
                            align-items: center;
                            img{
                            height: 100%;
                            border-radius: 50%;
                            >div{
                                display: -webkit-box;
                                -webkit-line-clamp: 1;
                                -webkit-box-orient: vertical;
                                overflow: hidden;
                            }
                        }
                        }
                        .canyv{
                            display: flex;
                            align-items: center;
                            img{
                            height: 90%;
                        }
                        }
                    }
                }
            }
        }
    }
</style>